@import "~scss/variables";

$sw-loader-element-color: $color-shopware-brand-500;
$sw-loader-rotate-duration: 1.4s;
$sw-loader-z-index: $z-index-loader;

.sw-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: $sw-loader-z-index;

    .sw-loader__container {
        display: grid;
        grid-auto-columns: auto;
        text-align: center;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .sw-loader-element {
        div {
            position: absolute;
            width: 100%;
            height: 100%;
            border-width: 4px;
            border-style: solid;
            border-radius: 50%;
            border-color: $sw-loader-element-color transparent transparent transparent;
            animation: sw-loader-rotator $sw-loader-rotate-duration cubic-bezier(0.5, 0, 0.5, 1) infinite;

            &:nth-child(1) {
                animation-delay: -0.45s;
            }

            &:nth-child(2) {
                animation-delay: -0.3s;
            }

            &:nth-child(3) {
                animation-delay: -0.15s;
            }
        }
    }

    @keyframes sw-loader-rotator {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
